<template>
  <div>
    <el-dialog :visible.sync="showDialog" title="预结算审核" width="75%">
      <el-radio-group v-model="company" style="margin-bottom: 30px;" @input="getCompany">
        <el-radio-button :label="item.type" v-for="(item,index) in companyList" :key="index">{{
            item.name
          }}
        </el-radio-button>

      </el-radio-group>

      <el-tabs tab-position="left" style="height: 500px;overflow-y: auto;" v-model="settlementType"
               @tab-click="getType">
        <el-tab-pane label="预结算列表" name="1">
          <el-table :data="auditData">
            <el-table-column prop="companyId" label="ID"></el-table-column>
            <el-table-column prop="companyName" label="供应商名称"></el-table-column>
            <el-table-column prop="preSettlementMoney" label="预结算金额"></el-table-column>
            <el-table-column label="预结算单">
              <template v-slot:default="scope">
                <el-link v-if="scope.row.preSettlementUrl" style="font-size: 12px;color: #66b1ff"
                         :href="'https://'+scope.row.preSettlementUrl">下载
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
            <el-table-column prop="placeTime" label="下单时间"></el-table-column>
            <el-table-column prop="deliveryTime" label="发货日期"></el-table-column>
            <el-table-column prop="d" label="设计图">
              <template v-slot:default="scope">
                <el-link v-if="scope.row.designUrl" style="font-size: 12px;color: #66b1ff"
                         :href="'https://'+scope.row.designUrl">下载
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="e" label="合同">
              <template v-slot:default="scope">
                <el-link v-if="scope.row.contractUrl" style="font-size: 12px;color: #66b1ff"
                         :href="'https://'+scope.row.contractUrl">下载
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="d" label="付款凭证">
              <template v-slot:default="scope">
                <div style="display: flex">
                  <el-image style="width: 50px"
                            v-for="item in scope.row.paymentUrl"
                            :src="'https://' + item"
                            :preview-src-list="['https://' + item]"
                            :key="item"></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template v-slot:default="scope">
                <p v-if="scope.row.preSettlementSpecialistState==0">未审核</p>
                <p v-if="scope.row.preSettlementSpecialistState==1" style="color: green;"> 通过</p>
                <p v-if="scope.row.preSettlementSpecialistState==2" style="color: red;">驳回</p>
                <p v-if="scope.row.preSettlementSpecialistState==2">驳回理由：{{ scope.row.rejectReasonSpecialist }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot:default="scope">
                <el-link style="font-size: 12px;color:#dd6161" @click="auditBtn(scope.row)"
                         v-if="scope.row.preSettlementSpecialistState==0&&authorityList.includes(121)">审核
                </el-link>
                <el-link style="font-size: 12px;color:#6788FF" @click="uploadPayPic(scope.row)"
                         v-if="scope.row.preSettlementSpecialistState==1&&authorityList.includes(122)">上传付款凭证
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="结算列表" name="2">
          <el-table :data="auditData">
            <el-table-column prop="companyName" label="供应商名称"></el-table-column>
            <el-table-column prop="preSettlementMoney" label="预结算金额"></el-table-column>
            <el-table-column label="预结算单">
              <template v-slot:default="scope">
                <el-link style="font-size: 12px;color: #66b1ff" :href="'https://'+scope.row.preSettlementUrl">下载
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
            <el-table-column label="状态">
              <template v-slot:default="scope">
                <p v-if="scope.row.preSettlementSpecialistState==0">未审核</p>
                <p v-if="scope.row.preSettlementSpecialistState==1" style="color: green;">通过</p>
                <p v-if="scope.row.preSettlementSpecialistState==2" style="color: red;">驳回</p>
                <p v-if="scope.row.preSettlementSpecialistState==2">驳回理由：{{ scope.row.rejectReasonSpecialist }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot:default="scope">
                <el-link style="font-size: 12px;color:#dd6161" @click="auditBtn(scope.row)"
                         v-if="scope.row.preSettlementSpecialistState==0&&authorityList.includes(121)">审核
                </el-link>
                <el-link style="font-size: 12px;color:#6788FF" @click="uploadPayPic(scope.row)"
                         v-if="scope.row.preSettlementSpecialistState==1&&authorityList.includes(122)">上传付款凭证
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog :visible.sync="auditDialog" append-to-body title="审核" width="30%" center>
      <div> <span>
        驳回理由：
      </span>
        <el-input size="small" style="width: 300px;margin-top: 10px" placeholder="审核驳回时填入，审核通过请省略"
                  type="textarea" v-model="rejectReasonSpecialist"></el-input>
      </div>
      <span slot="footer">
        <el-button size="small" style="background-color:#dd6161;color: #eeeeee" @click="_audit(2)" v-loading="loading">驳 回</el-button>
        <el-button size="small" style="background-color:#303e9d;color: #eeeeee" @click="_audit(1)" v-loading="loading">通 过</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="picDialog" append-to-body title="审核" width="30%" center>
      <span>付款凭证：</span>
      <upload-excel
          v-if="picDialog"
          style="margin-top: 10px"
          :type="'付款凭证'"
          @addStatus="handleUploadSuccess"
      />
      <span slot="footer">
        <el-button size="small" style="background-color:#303e9d;color: #eeeeee" @click="upload">上 传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import uploadExcel from "./uploadExcel.vue";
import quinn from "../../../utils/quinn";
import store from "../../../store";

export default {
  name: "presettlementAduit",
  components: {
    uploadExcel
  },
  data() {
    return {
      showDialog: false,
      loading: false,
      auditDialog: false,
      picDialog: false,
      authorityList: [],
      settlementType: "1",
      paymentUrl: "",
      brandPartyId: "",
      company: '',
      rejectReasonSpecialist: '',
      supplierTaskId: '',
      assignTaskId: '',
      companyList: [],
      auditData: []
    }
  },
  created() {
  },
  methods: {
    async handleOpen(row) {
      this.brandPartyId = row.brandPartyId
      this.showDialog = true
      this.assignTaskId = row.assignTaskId
      await this.getData()
      const {authorityList = []} = quinn.getStorage("userDatav3") || store.state.userData || {};
      this.authorityList = authorityList
    },
    async getData() {
      const companyData = await this.$api.budgetGetSupplierTypeVo({brandPartyId: this.brandPartyId})
      this.companyList = companyData
      this.company = companyData[0].type
      const data = {
        settlementType: this.settlementType,
        type: this.company,
        assignTaskId: this.assignTaskId
      }
      const res =await this.$api.budgetGetSupplierTaskVo(data)
      res.map(a => {
        if (a.paymentUrl && a.paymentUrl.includes(",")) {
          a.paymentUrl = a.paymentUrl.split(",");
        } else if (!a.paymentUrl) {
          a.paymentUrl = []
        } else {
          a.paymentUrl = [a.paymentUrl];
        }
      })
      this.auditData = res
    },
    auditBtn(row) {
      this.auditDialog = true
      this.supplierTaskId = row.supplierTaskId
      this.rejectReasonSpecialist = ''
    },
    handleUploadSuccess(val) {
      if (val.type == '付款凭证') {
        this.paymentUrl = val.file
      }
    },
    upload() {
      if (!this.paymentUrl) return this.$message.warning('请上传付款凭证！')
      const data = {
        paymentUrl: this.paymentUrl,
        supplierTaskId: this.supplierTaskId
      }
      this.$api.budgetUpdatePaymentUrl(data).then(res => {
        if (res == 1) {
          this.$message.success('上传成功！')
          this.picDialog = false
          this.getData()
        }
      })
    },
    getCompany(val) {
      const data = {
        settlementType: this.settlementType,
        type: val,
        assignTaskId: this.assignTaskId
      }
      this.$api.budgetGetSupplierTaskVo(data).then(res => {
        res.map(a => {
          if (a.paymentUrl && a.paymentUrl.includes(",")) {
            a.paymentUrl = a.paymentUrl.split(",");
          } else if (!a.paymentUrl) {
            a.paymentUrl = []
          } else {
            a.paymentUrl = [a.paymentUrl];
          }
        })
        this.auditData = res
      })
    },
    getType() {
      const data = {
        settlementType: this.settlementType,
        type: this.company,
        assignTaskId: this.assignTaskId
      }
      this.$api.budgetGetSupplierTaskVo(data).then(res => {
        res.map(a => {
          if (a.paymentUrl && a.paymentUrl.includes(",")) {
            a.paymentUrl = a.paymentUrl.split(",");
          } else if (!a.paymentUrl) {
            a.paymentUrl = []
          } else {
            a.paymentUrl = [a.paymentUrl];
          }
        })
        this.auditData = res
      })
    },
    _audit(val) {
      // this.loading = true
      const data = {
        preSettlementSpecialistState: val,
        rejectReasonSpecialist: this.rejectReasonSpecialist,
        supplierTaskId: this.supplierTaskId,
        assignTaskId: this.assignTaskId
      }
      if (val == 1) delete data.rejectReasonSpecialist
      if (val == 2 && !this.rejectReasonSpecialist) return this.$message.warning('请填写驳回理由')
      this.$message.success('请稍后...')
      this.$api.budgetUpdatePreSettlementSpecialistState(data).then(res => {
        // this.loading = false
        if (res == 1) {
          this.$message.success('审核成功')
          this.auditDialog = false
          this.getData()
        }
      })
    },
    uploadPayPic(row) {
      this.picDialog = true
      this.supplierTaskId = row.supplierTaskId
    },
  }
}
</script>

<style scoped>
span {
  font-weight: bold;
}
</style>